<template>
  <div class="p20">
    <div class="p20-wuzi" @click="openVideo"></div>
    <div
      v-if="isShowFrame2"
      class="iframe1"
      draggable="true"
      @dragend="changePosition1"
      :style="{'top':iframePosition1.top+'px','left':iframePosition1.left+'px'}"
      v-clickoutside="closeIframe2"
    >
      <div>
        <video
          controls="controls"
          width="100%"
          height="100%"
          autoplay="autoplay"
          loop="loop"
          :muted="fifth5Muted"
          ref="video3"
          style="object-fit: fill"
        >
          <source :src="videoUrl+'/5/3.mp4'" type="video/mp4" />
        </video>
      </div>
    </div>

    <div class="p20-center-right" @click="isIframe"></div>
    <div
      v-if="showIframe"
      class="iframe"
      draggable="true"
      @dragend="changePosition"
      v-clickoutside="closeIframe"
      :style="{'top':iframePosition.top+'px','left':iframePosition.left+'px'}"
    >
      <div class="iframe-title">
        <span>网上电网</span>
        <span @click="isIframe">
          <Icon type="close"></Icon>
        </span>
      </div>
      <div style="display:flex;justify-content: center;align-items: center;">
        <iframe
          width="1360px"
          height="800px"
          src="http://pis.sgcc.com.cn/PowerInfo/pisMain/pages/frame.jsp"
        ></iframe>
      </div>
    </div>
  </div>
</template>
<script>
import WOW from "wow.js";
import clickoutside from "../../assets/directives/clickoutside.js";
import { mapState } from "vuex";
export default {
  name: "P20",
  created() {
    new WOW().init();
  },
  computed: {
    ...mapState(["videoUrl"])
  },
  mounted() {
    document.addEventListener("keyup", this.changePage);
  },
  data() {
    return {
      showIframe: false,
      iframePosition: {
        top: 150,
        left: 1200
      },
      iframePosition1: {
        top: 150,
        left: 1200
      },
      isShowFrame2: false,
      fifth5Muted: false
    };
  },
  methods: {
    openVideo(e) {
      this.isShowFrame2 = true;
      e.stopPropagation();
    },
    changePage(e) {
      //右键
      if (e.keyCode == 40 || e.keyCode == 34) {
        this.$router.replace(`/ppt/p21`);
      }
      //左键
      if (e.keyCode == 38 || e.keyCode == 33) {
        this.$router.replace(`/ppt/p19`);
      }
    },
    isIframe(e) {
      this.showIframe = !this.showIframe;
      e.stopPropagation();
    },
    closeIframe(e) {
      this.showIframe = false;
      e.stopPropagation();
    },
    //改变位置
    changePosition(e) {
      this.iframePosition = {
        top: e.y,
        left: e.x
      };
    },
    changePosition1(e) {
      this.iframePosition1 = {
        top: e.y,
        left: e.x
      };
    },
    closeIframe2(e) {
      this.isShowFrame2 = false;
      this.$refs.video3.play();
      e.stopPropagation();
    }
  },
  directives: { clickoutside },
  beforeDestroy() {
    document.removeEventListener("keyup", this.changePage);
  },
  watch: {
    $route: {
      handler(n, v) {
        document.addEventListener("keyup", this.changePage);
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
.p20 {
  position: relative;
  background-image: url("../../assets/images/pptScreen/pFirst/20.png");
}
.p20-center-right {
  position: absolute;
  width: 425px;
  height: 276px;
  top: 630px;
  left: 1186px;
  cursor: pointer;
}
.iframe {
  width: 1400px;
  position: absolute;
  background-color: #fff;
  z-index: 999;
  &-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    font-weight: bold;
  }
}
.p20-wuzi {
  position: absolute;
  width: 353px;
  height: 241px;
  top: 333px;
  left: 2183px;
  cursor: pointer;
}

.iframe1 {
  width: 1280px;
  height: 720px;
  position: absolute;
  border-radius: 4px;
  background-color: #fff;
  z-index: 999;
}
</style>